<template>
  <div class="example-app-detail">
    <Descriptions :column="2" bordered>
      <DescriptionsItem label="应用ID">
        {{ data?.id }}
      </DescriptionsItem>
      
      <DescriptionsItem label="应用名称">
        {{ data?.name }}
      </DescriptionsItem>
      
      <DescriptionsItem label="应用编码">
        <Tag color="blue">{{ data?.code }}</Tag>
      </DescriptionsItem>
      
      <DescriptionsItem label="域名">
        <span v-if="data?.domain">
          <a :href="`https://${data.domain}`" target="_blank">
            {{ data.domain }}
          </a>
        </span>
        <span v-else class="text-gray-400">未设置</span>
      </DescriptionsItem>
      
      <DescriptionsItem label="租户ID">
        {{ data?.tenant_id }}
      </DescriptionsItem>
      
      <DescriptionsItem label="状态">
        <Tag :color="data?.is_active ? 'green' : 'red'">
          {{ data?.is_active ? '启用' : '禁用' }}
        </Tag>
      </DescriptionsItem>
      
      <DescriptionsItem label="创建时间">
        {{ formatDateTime(data?.created_at) }}
      </DescriptionsItem>
      
      <DescriptionsItem label="更新时间">
        {{ formatDateTime(data?.updated_at) }}
      </DescriptionsItem>
      
      <DescriptionsItem v-if="data?.deleted_at" label="删除时间">
        {{ formatDateTime(data?.deleted_at) }}
      </DescriptionsItem>
      
      <DescriptionsItem label="删除状态">
        <Tag :color="data?.deleted ? 'red' : 'green'">
          {{ data?.deleted ? '已删除' : '正常' }}
        </Tag>
      </DescriptionsItem>
    </Descriptions>

    <!-- 操作按钮 -->
    <div class="detail-actions">
      <Space>
        <Button v-if="!data?.deleted" type="primary" @click="handleEdit">
          编辑
        </Button>
        <Button 
          v-if="!data?.deleted" 
          :type="data?.is_active ? 'default' : 'primary'"
          @click="handleToggleStatus"
        >
          {{ data?.is_active ? '禁用' : '启用' }}
        </Button>
        <Button v-if="data?.deleted" type="primary" @click="handleRestore">
          恢复
        </Button>
        <Button 
          v-if="!data?.deleted" 
          danger 
          @click="handleDelete"
        >
          删除
        </Button>
        <Button 
          v-if="data?.deleted" 
          danger 
          @click="handleForceDelete"
        >
          永久删除
        </Button>
      </Space>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Button, Descriptions, DescriptionsItem, message, Modal, Space, Tag } from 'ant-design-vue';

import { exampleAppApi, type ExampleAppItem } from '#/api/example-app';

interface Props {
  data?: ExampleAppItem | null;
}

const props = withDefaults(defineProps<Props>(), {
  data: null,
});

const emit = defineEmits<{
  edit: [data: ExampleAppItem];
  refresh: [];
}>();

// 格式化日期时间
const formatDateTime = (dateTime?: string) => {
  if (!dateTime) return '-';
  return new Date(dateTime).toLocaleString();
};

// 编辑操作
const handleEdit = () => {
  if (props.data) {
    emit('edit', props.data);
  }
};

// 切换状态
const handleToggleStatus = async () => {
  if (!props.data) return;

  try {
    await exampleAppApi.toggleStatus(props.data.id, !props.data.is_active);
    message.success('状态更新成功');
    emit('refresh');
  } catch (error) {
    message.error('状态更新失败');
    console.error('更新状态失败:', error);
  }
};

// 删除操作
const handleDelete = () => {
  if (!props.data) return;

  Modal.confirm({
    title: '确认删除',
    content: `确定要删除应用 "${props.data.name}" 吗？`,
    okText: '确定',
    cancelText: '取消',
    onOk: async () => {
      try {
        await exampleAppApi.delete(props.data!.id);
        message.success('删除成功');
        emit('refresh');
      } catch (error) {
        message.error('删除失败');
        console.error('删除应用失败:', error);
      }
    },
  });
};

// 恢复操作
const handleRestore = () => {
  if (!props.data) return;

  Modal.confirm({
    title: '确认恢复',
    content: `确定要恢复应用 "${props.data.name}" 吗？`,
    okText: '确定',
    cancelText: '取消',
    onOk: async () => {
      try {
        await exampleAppApi.restore(props.data!.id);
        message.success('恢复成功');
        emit('refresh');
      } catch (error) {
        message.error('恢复失败');
        console.error('恢复应用失败:', error);
      }
    },
  });
};

// 永久删除操作
const handleForceDelete = () => {
  if (!props.data) return;

  Modal.confirm({
    title: '确认永久删除',
    content: `确定要永久删除应用 "${props.data.name}" 吗？此操作不可恢复！`,
    okText: '确定',
    cancelText: '取消',
    okType: 'danger',
    onOk: async () => {
      try {
        await exampleAppApi.forceDelete(props.data!.id);
        message.success('永久删除成功');
        emit('refresh');
      } catch (error) {
        message.error('永久删除失败');
        console.error('永久删除应用失败:', error);
      }
    },
  });
};
</script>

<style scoped>
.example-app-detail {
  padding: 16px 0;
}

.detail-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.text-gray-400 {
  color: #9ca3af;
}
</style>